<script lang="ts" setup>

import p1 from "@/assets/images/xianfengziyuanwang.png"
import p2 from "@/assets/images/maojiuyuqi.png"
import p3 from "@/assets/images/chengxuyuan.png"
import p4 from "@/assets/images/xy.png"
import p5 from "@/assets/images/dongyu.png"
import p6 from "@/assets/images/yinghuaxiaozhen.png"

const options = [
  { src: p1 },
  { src: p2 },
  { src: p3 },
  { src: p4 },
  { src: p5 },
  { src: p6 },
]



</script>

<template>
  <t-row class="container_first">
    <div>
      <h1>服务全球海量客户的行业案例</h1>
      <p>Author授权系统完善的服务体系为您的应用保驾护航</p>
    </div>
  </t-row>

  <t-row class="container_second">
    <t-col v-for="item in options" :key="item" :lg="2" :md="3" :sm="4" :xl="2" :xs="6" class="col">
      <t-card class="card" hover-shadow>
        <div class="module">
          <img :src="item.src" alt=""/>
        </div>
      </t-card>
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>
p{
  font-size: 13px;
}
.container_first{
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
}
.container_second{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 25px;
  .card{
    margin: 10px;

    .module{
      height: 50px;
display: flex;
      justify-content: center;
      align-items: center;
     img{
       width: 100%;
       height: 100%;
     }
    }
  }


}




</style>
